// 引入vue 和vue-router
import Vue from "vue";
import VueRouter from "vue-router";

// 使用插件
Vue.use(VueRouter);

// 生成一个路由表
const routes = [
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/home",
    component: () => import("../views/MyHome.vue"),
    children: [
      {
        path: "/home",
        redirect: "/home/movies",
      },
      {
        path: "/home/movies",
        component: () => import("../views/home/MyMovies.vue"),
        children: [
          {
            path: "/home/movies",
            redirect: "/home/movies/hot",
          },
          {
            path: "/home/movies/hot",
            component: () => import("../components/home/MyList.vue"),
            meta: {
              requireAlive: true,
            },
          },
          {
            path: "/home/movies/cinema",
            component: () => import("../components/home/MyCinema.vue"),
          },
          {
            path: "/home/movies/wait",
            component: () => import("../components/home/MyWait.vue"),
          },
          {
            path: "/home/movies/classic",
            component: () => import("../components/home/MyClassic.vue"),
          },
        ],
      },
      {
        path: "/home/video",
        component: () => import("../views/home/MyVideo.vue"),
        meta: {
          title: "猫眼视屏",
        },
      },
      {
        path: "/home/show",
        component: () => import("../views/home/MyShow.vue"),
        meta: {
          requireLogin: true,
          title: "猫眼演出",
        },
      },
      {
        path: "/home/mini",
        component: () => import("../views/home/MyMini.vue"),
        meta: {
          title: "猫眼小视屏",
        },
      },
      {
        path: "/home/mine",
        component: () => import("../views/home/MyMine.vue"), // 路由元信息  里面是一个对象  对象里面可以随意定义
        meta: {
          requireLogin: true,
          title: "我的猫眼",
        },
      },
    ],
  },
  {
    path: "/detail/:id",
    props: true,
    component: () => import("../views/MyDetail.vue"),
  },
  {
    path: "/city",
    component: () => import("../views/MyCity.vue"),
  },
  {
    path: "/login",
    component: () => {
      return import("../views/MyLogin.vue");
    },
  },
  {
    path: "*",
    component: () => import("../views/NotFond.vue"),
  },
];

// 生成一个路由实例
const router = new VueRouter({
  routes,
  scrollBehavior(to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    // return { x: 0, y: 0 };

    //当我们点击前进或者后退的时候，就会有savedPosition
    if (savedPosition) {
      return savedPosition;
    } else {
      return { x: 0, y: 0 };
    }
  },
});

// 解决重复点击报错问题
const VueRouterPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(to) {
  return VueRouterPush.call(this, to).catch((err) => err);
};

// 全局的前置首位
//当任意的路由发生跳转之前都会执行
router.beforeEach((to, from, next) => {
  //to 去的哪个页面的路由信息
  // from 之前的页面的路由信息
  // console.log(to);
  // console.log(from);
  // next也可以用来做重定向
  // console.log(123);
  // next(); //守卫放行
  // next(false); //不放行
  // next("/login"); //重定向 问题就是会进入卡死状态 造成死循环

  //路由鉴权
  if (to.meta.requireLogin) {
    // 判断要去的那个页面是否是需要登录的页面
    if (localStorage.getItem("token")) {
      // 判断页面是否登陆过了
      // 登陆过了
      next();
    } else {
      next("/login");
    }
  } else {
    next();
  }
});

// 路由独享守卫
// 组件内守卫

// 全局解析守卫
// 用法：与全局前置守卫完全相同
// 区别：执行时机略有不同  全局前置守卫会优先与全局解析守卫执行
// 全局前置守卫  是在没有进去之前就开启了守卫    全局解析守卫 是在将要进入的时候才会开启守卫
// router.beforeResolve((to, from, next) => {})

//全局后置钩子（函数）
router.afterEach((to) => {
  // 可以负责一些和路由元相关的信息
  document.title = to.meta.title || "猫眼电影 | 娱乐看我的 ";
});

export default router;
